import { Layout, Card } from 'antd';
import { HomeOutlined, UserOutlined, MailOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import './home.css';

const { Content, Footer } = Layout;

const HomePage = () => {
    const navigate = useNavigate();

    const cardItems = [
        { 'title': 'Home', 'icon': <HomeOutlined /> },
        { 'title': 'Video', 'icon': <UserOutlined /> },
        { 'title': 'About', 'icon': <MailOutlined /> },
        { 'title': 'Print', 'icon': <MailOutlined /> },
        { 'title': 'Counter', 'icon': <MailOutlined /> },
        { 'title': 'Animation', 'icon': <MailOutlined /> },
        { 'title': 'Fade', 'icon': <MailOutlined /> },
        { 'title': 'Currency', 'icon': <UserOutlined /> },
        { 'title': 'Money', 'icon': <MailOutlined /> },
        { 'title': 'Todo', 'icon': <MailOutlined /> },
        { 'title': 'Scroll', 'icon': <MailOutlined /> },
        { 'title': 'Callback', 'icon': <HomeOutlined /> },
        { 'title': 'Beebox', 'icon': <HomeOutlined /> },
        { 'title': 'Table', 'icon': <HomeOutlined /> },
        { 'title': 'CountDown', 'icon': <HomeOutlined /> },
        { 'title': 'Stay', 'icon': <HomeOutlined /> },
        { 'title': 'Ease', 'icon': <HomeOutlined /> },
        { 'title': 'Search', 'icon': <HomeOutlined /> },
        { 'title': 'Memo', 'icon': <HomeOutlined /> },
        { 'title': 'UseMemo', 'icon': <HomeOutlined /> },
        { 'title': 'UseRef', 'icon': <HomeOutlined /> },
        { 'title': 'UseCallback', 'icon': <HomeOutlined /> },
        { 'title': 'Lazy', 'icon': <HomeOutlined /> },
        { 'title': 'Foward-ref', 'icon': <HomeOutlined /> },
        { 'title': 'Portal', 'icon': <HomeOutlined /> },
        { 'title': 'Loading', 'icon': <HomeOutlined /> },
        { 'title': 'Login', 'icon': <HomeOutlined /> },
        { 'title': 'Home', 'icon': <HomeOutlined /> },
        { 'title': 'Skeleton', 'icon': <HomeOutlined /> },
        { 'title': 'UseReducer', 'icon': <HomeOutlined /> },
        { 'title': 'Abort', 'icon': <HomeOutlined /> },
        { 'title': 'Phone', 'icon': <HomeOutlined /> },
        { 'title': 'Route-From', 'icon': <HomeOutlined /> },
        { 'title': 'Route-To', 'icon': <HomeOutlined /> },
        { 'title': 'SSE', 'icon': <HomeOutlined /> },
        { 'title': 'SSE-Enhance', 'icon': <HomeOutlined /> },
        { 'title': 'Customer', 'icon': <HomeOutlined /> },

    ];
    const cardData = cardItems.map((item, index) => ({
        key: index.toString(),
        title: item.title,
        icon: item.icon,
        onClick: () => {
            if (index === 0) {
                navigate('/');
            } else {
                navigate(item.title.toLowerCase());
            }
        }
    }));

    return (
        <Layout>
            <Content className='content'>
                <div className='out-wrapper' >
                    <div className="site-card-wrapper" >
                        <div className='in-wrapper' >
                            {cardData.map(card => (<Card onClick={card.onClick} key={card.key} title={card.title} extra={card.icon} className='each-card'></Card>))}
                        </div>
                    </div>
                </div>
            </Content>
            <Footer className="text-3xl font-bold underline " style={{ textAlign: 'center' }}>
                Ant Design ©2025 Created by Ant UED
            </Footer>
        </Layout>
    );
};

export default HomePage;
